/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-06 17:31:24
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-07-18 17:54:11
 * @FilePath: \cxl-h5\src\components\message\index.ts
 */
import { render, h, reactive } from 'vue'
import messageVue from './Index.vue'

interface MessageInterface {
    content: string
    active: boolean
    top: number | string
    className: string
    type: string
}

enum MessageType {
    success = 'success',
    warning = 'warning',
    danger = 'danger',
    error = 'error',
    info = 'info'
}

interface params {
    content: string
    height?: number
    callback?: (arg?: any) => any
}

class Message {
    //获取message添加的根目录
    private root: HTMLElement
    //用于判断是否已经执行了render函数
    private isCreate = false
    //存放message item
    private list: any[]
    //定义每个message的高度 rem
    private offsetHeight = '5'
    wHeight = 0
    constructor() {
        //获取根目录
        this.root = document.querySelector('body') as HTMLElement
        this.list = reactive([])
        this.wHeight = window.innerHeight
    }
    success(obj: params | string) {
        this.parseParameter(obj, MessageType.success)
    }
    warning(obj: params | string) {
        this.parseParameter(obj, MessageType.warning)
    }
    danger(obj: params | string) {
        this.parseParameter(obj, MessageType.danger)
    }
    error(obj: params | string) {
        this.parseParameter(obj, MessageType.error)
    }
    info(obj: params | string) {
        this.parseParameter(obj, MessageType.info)
    }

    private parseParameter(obj: params | string, type: string) {
        if (Object.prototype.toString.call(obj) === '[object String]') {
            //传入的是字符串
            this.create(obj.toString(), type, 0.1)
        } else if (Object.prototype.toString.call(obj) === '[object Object]') {
            //传入的是对象
            this.create((obj as params).content, type, (obj as params).height || 0.1, (obj as params).callback)
        } else {
            console.log('参数错误', '预期参数为String|Object', obj)
        }
    }

    private create(content: string, type: string, height = 0.1, callback = () => {}) {
        //每个message的top位置从上一个message的top获取+自身的高度
        const defaultTop: number | string = this.list.length
            ? Number(this.offsetHeight) + this.list[this.list.length - 1].top
            : 1
        const obj: MessageInterface = reactive({
            content: content,
            active: false,
            top: this.wHeight * height + 'px',
            className: type,
            type
        })
        this.list.push(obj)

        if (!this.isCreate) {
            this.isCreate = false
            render(h(messageVue, { list: this.list }), this.root)
        }
        this.update(obj, callback)
    }
    private update(obj: MessageInterface, callback = () => {}) {
        const startTime = setTimeout(() => {
            obj.active = true
            clearTimeout(startTime)
        }, 10)

        const endTime = setTimeout(() => {
            obj.active = false
            this.list.forEach((item: any) => {
                //item.top = item.top - Number(this.offsetHeight)
            })
            clearTimeout(endTime)
            const finishTime = setTimeout(() => {
                this.list.shift()
                clearTimeout(finishTime)
                callback()
            }, 550)
        }, 2000)
    }
}

const CxlMessage = new Message()

export { CxlMessage }
